<template>
	<view class="bigBoxSty">
		<div class="h-100"></div>
		<image src="../../../static/icon/setIcon.png" mode="" class="w-40 h-40 mr-24" style="float: right;" @click="goInfoPage"></image>
		<!-- 用户信息 -->
		 <view class="between ml-16 ml-24 mr-24 mt-40">
			 <view class="flex-start">
			 	<image src="../../../static/images/user/newUI/profilePicture.png" mode="" class="w-110 h-110"></image>
				<view class=" ml-20 ">
					<!-- {{get(userInfo, "user.username")}} -->
					<p class="fz32 font-bold text-111 mt-10" style="max-width: 300rpx;">{{get(userInfo, "user.username")}}</p>
					<view class="bg-white flex-start rounded-53 mt-16" style="max-width: 250rpx;">
						<image src="../../../static/icon/iconBusiKind.png" mode="" class="w-30 h-30 mt-5 ml-10"></image>
						<!-- {{ userInfo.identity_name }} -->
						<p style="color:#6E7EC5;font-size: 20rpx;margin-left:13rpx;line-height:35rpx" class="mr-20">{{ userInfo.identity_name }}</p>
					</view>
				</view>
			 </view>                        
		 	<view class="CertifiedSty" v-if="userInfoFull&&userInfo.is_audit==2">
				<image src="../../../static/icon/certifiedFlag.png" mode="" class="w-45 h-45"></image>
		 		<p class="fz22 font-bold text-white">已认证</p>
		 	</view>
			<view class="CertifiedSty" v-else>
				<image src="../../../static/icon/certifiedFlag.png" mode="" class="w-45 h-45"></image>
				<p class="fz22 font-bold text-white">未认证</p>
			</view>
		 </view>
		 <!-- 会员权益 -->
		 <view class="memberBox ml-24 mr-24 " v-if="userInfoFull" >
			 <!-- 会员展示 -->
			 <view class="" v-if="level == 0" @click="vip_route">
				<image src="../../../static/img/nonMember.png" mode="" class="w-full h-300 memberImg"></image>
			 </view>
			 <view class="goldSty" v-if="level == 1" @click="vip_route">
				<image src="../../../static/menmber/goldIcon.png" mode="" class="glodIconSty"></image>
				<view class="flex-start ml-40">
					<image src="../../../static/menmber/goldLv.png" mode="" class="h-35 w-90 mt-50"></image>
					<p class="memberTextSty pt-40 ml-10"> 钻石会员</p>
				</view>
				<p class="dateSty  ml-45 mt-15">{{userInfo.vip_expire_time}} 到期</p>
			 </view>
			 <view class="platinumSty" v-if="level == 2" @click="vip_route">
				<image src="../../../static/menmber/PlatinumIcon.png" mode="" class="glodIconSty"></image>
				<view class="flex-start ml-40">
					<image src="../../../static/menmber/PlatinumLv.png" mode="" class="h-35 w-90 mt-50"></image>
					<p class="memberTextSty pt-40 ml-10"> 铂金会员</p>
				</view>
				<p class="dateSty  ml-45 mt-15">{{userInfo.vip_expire_time}} 到期</p>
			 </view>
			 <view class="diamondSty" v-if="level == 3" @click="vip_route">
				<image src="../../../static/menmber/diamondIcon.png" mode="" class="glodIconSty"></image>
				<view class="flex-start ml-40">
					<image src="../../../static/menmber/diamondLv.png" mode="" class="h-35 w-90 mt-50"></image>
					<p class="memberTextSty pt-40 ml-10"> 钻石会员</p>
				</view>
				<p class="dateSty  ml-45 mt-15">{{userInfo.vip_expire_time}} 到期</p>
			 </view>
			 <!-- 积分操作 -->
			<view class="h-160 bg-white rounded-20 evenly memberInfo">
				<view class="flex-start flex changeRedee" @click="redeePoint">
					<image src="../../../static/img/RedeemPoints.png" mode="" class="w-90 h-90 ml-20"></image>
					<view class="ml-5">
						<view class="flex-start center">
							<h3 class="fz30 font-bold text-333">兑换积分</h3>
							<image src="../../../static/icon/shopArrow.png" mode="" class="w-60 h-60"></image>
						</view>
						<p style="font-size: 20rpx; color: #6083A2; margin-top:12rpx">多种礼品等你兑换</p>
					</view>
				</view>
				<view class="flex-start flex RechargeSty" @click="scorePoint">
					<image src="../../../static/img/Recharge.png" mode=""class="w-90 h-90 ml-20"></image>
					<view class="ml-5">
						<view class="flex-start center">
							<h3 class="fz30 font-bold text-333">充值积分</h3>
							<image src="../../../static/icon/inArrow.png" mode="" class="w-60 h-60"></image>
						</view>
						
						<p style="font-size: 20rpx; color: #914F03;margin-top:12rpx">积分余额{{ userInfoFull.score }}</p>
					</view>
				</view>
			</view>
		 </view>
		 <!-- 功能list -->
		 <view class="flex-start wrap bg-white mt-30 rounded-20 ml-24 mr-24 ">
		 	<view class="" v-for="(item, index) in functionList" class="h-160 w-170 flex-col center relative" @click="goPage(item.route, index)">
				<!-- <u-badge v-if="item.value" class="badgeBox" :value="item.value" :type="type"></u-badge> -->
		 		<image :src="item.src" mode="" class="w-50 h-50"></image>
				<p class="fz22 text-555 mt-24">{{item.text}}</p>
		 	</view>
		 </view>
		 
		 <u-popup v-model="showCustomer" mode="bottom" length="30%" :closeable="true">
			 <view class="flex-col center">
			 	<view class="personSty" @click="personModal">
					人工客服
				</view>
				<view class="onlineSty">
					在线客服
				</view>
			 </view>
		</u-popup>
		<u-modal v-model="showPersonInfo" width="70%" :show-title="false">
			<view class="flex flex-wrap center mt-30 mb-30">
				<view class="phoneSty" v-for="item in phoneList">
					{{item.country == 'zh'? '中国' : '俄罗斯'}} {{item.tel}}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app"
	import { getCustomerTel } from '@/api/user'
	export default {
		data() {
			return {
				type:"warning",
				level: 0,
				showCustomer: false,
				showPersonInfo: false,
				phoneList: [],
				functionList: [ 
					{
						text: '我的发布',
						route: '/pages/tabbar/newUser/myRelease/myReleaseList',
						src: '/static/icon/icon2.png',
						value: 15
					},
					{
						text: '我的邀请',
						route: '/pages/tabbar/newUser/Invite/myInvite',
						src: '/static/icon/icon3.png',
						value: 15
					}, 
					{
						text: '我的收藏',
						route: '/pages/tabbar/newUser/myCollection/collectionList',
						src: '/static/icon/icon5.png'
					},
					{
						text: '服务订单',
						route: '',
						src: '/static/icon/icon4.png'
					},
					{
						text: '身份认证',
						route: '',
						src: '/static/icon/icon2.png'
					},
					{
						text: '我的客服',
						route: '',
						src: '/static/icon/icon3.png'
					}, 
					{
						text: '积分账单 ',
						route: '',
						src: '/static/icon/icon5.png'
					},
					{
						text: '投诉建议',
						route: '/pages/tabbar/newUser/Complain/complaintPage',
						src: '/static/icon/icon4.png'
					},
					{
						text: '视频教程',
						route: '',
						src: '/static/icon/icon1.png'
					},
					{
						text: '赢取积分',
						route: '',
						src: '/static/icon/icon1.png'
					},
				],
				userStatus: null, //认证状态
				userInfoFull: {},
				token: "",
				off: false,
				scoreoff: false,
				
				lang: getApp().globalData.lang,
				currentLang: "",
				customer: '',
				userInfo: {
					label: [],
					country: {
						value: 0
					}
				},
				authShow: false,
				loading: false,
				isAuthName: -1,
				list: [],
				isShow: false,
				isIcon: false,
			}
		},
		onShow() {
			this.token = uni.getStorageSync("xzdToken");
			this.userInfoFull = uni.getStorageSync("userInfoFull")
			this.loading = false
			this.authShow = false;
			this.getUserInfo()
		},
		
		methods: {
			vip_route(){
				uni.navigateTo({
					url: "/pages/zWebView/zWebView?url=" + encodeURIComponent(
						`/pages/vip/index`)
				})
			},
			scorePoint(){
				uni.navigateTo({
					url: "/pages/zWebView/zWebView?url=" + encodeURIComponent(
						`/pages/vip/scorePoint`)
				})
			},
			goPage(route, index) {
				var vm = this
				if(uni.getStorageSync("userInfoFull")){
					if(index == 4){
						//货代认证
						if(this.userInfoFull.identity_type==5||this.userInfoFull.identity_type==6||this.userInfoFull.identity_type==7||this.userInfoFull.identity_type==2){
							var u_id = this.userInfoFull.user_id
							uni.navigateTo({
								url: "/pages/zWebView/zWebView?url=" + encodeURIComponent(
									`/pages/forwardingInformation/businessCardInput?u_id=`+u_id)
							})
						}
						
					}else if (index == 5) {
						const that = this;
						that.$u.api.user.getCustomerTel().then(res => {
							this.phoneList = res
						})
						this.showCustomer = true
					} else {
						uni.navigateTo({
							url: route
						})
					}
				}else{
					vm.$u.toast(app.$i18n.t('请先登录'));
					uni.clearStorage();
					uni.clearStorageSync();
					
					uni.setStorage({
						key: 'version',
						data: store.state.version
					})
					uni.setStorageSync('version', store.state.version)
					
					setTimeout(() => {
						// 此为uView的方法，详见路由相关文档
						vm.$u.route('/pages/user/login/login')
					}, 1000)
				}
			},
			// 复制文本到剪切板
			copyToClipboard(text) {
				console.log('text----', text)
			    uni.setClipboardData({
			        data: text,
			        success: function () {
			            uni.showToast({
			                title: '复制成功',
			                icon: 'success',
			                duration: 2000
			            });
			        },
			        fail: function () {
			            uni.showToast({
			                title: '复制失败',
			                icon: 'none',
			                duration: 2000
			            });
			        }
			    });
			},
			goInfoPage() {
				console.log('--==9999998888')
				uni.navigateTo({
					url: '/pages/user/install/install'
				})
			},
			personModal() {
				this.showCustomer = false
				this.showPersonInfo = true
			},
			redeePoint() {
				uni.navigateTo({
					url: '/pages/tabbar/newUser/Mall/pointsMall'
				})
			},
			async getUserInfo() {
				var userinfo = "";
				const that = this;
				const {
					deviceBrand,
					deviceModel,
					deviceId,
					osName,
					osVersion
				} = uni.getSystemInfoSync();
				userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' + osVersion
				let user = await that.$u.api.user.getUserInfo({
					userinfo: userinfo
				});
				this.userInfoFull = user;
				uni.setStorageSync("userInfoFull", user)
			
				// #ifdef APP-PLUS
				// plus.push.getClientInfoAsync((info) => {
				// 	let cid = info["clientid"];
				// 	userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' +
				// 		osVersion + ',' + cid
				// 	user = that.$u.api.user.getUserInfo({
				// 		userinfo: userinfo
				// 	});
				// });
				// #endif
			
				
				this.userInfo = user
				this.userInfo.avatar = IMAGE_URL + this.userInfo.avatar
				this.level = user.level
				this.loading = true
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F7FB;
	}
	.phoneSty {
		width: 80%;
		height: 76rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		line-height: 76rpx;
		letter-spacing: 0px;
		border: 2rpx solid #E9E9E9;
		border-radius: 500rpx;
		margin-top: 24rpx;
		text-align: center;
	}
	.personSty {
		width: 90%;
		height: 94rpx;
		border: 2rpx solid #E9E9E9;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		line-height: 94rpx;
		letter-spacing: 0%;
		border-radius: 500rpx;
		text-align: center;
		margin-top: 80rpx;
	}
	.onlineSty {
		width: 90%;
		height: 94rpx;
		background-color: #278AFF;
		font-family: PingFang SC;
		font-weight: 600;
		color: #fff;
		font-size: 32rpx;
		line-height: 94rpx;
		letter-spacing: 0%;
		border-radius: 500rpx;
		text-align: center;
		margin-top: 32rpx;
	}
	.bigBoxSty {
		background-image: url(/static/images/user/newUI/bgIMg.png);
		background-size: 100% 40%;
		background-repeat: no-repeat;
	}
	.CertifiedSty {
		width: 121rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #FFBB00 0%, #FC7810 100%);
		display: flex;
		justify-content: flex-start;
		border-radius: 20rpx;
		line-height: 40rpx;
		image {
			margin-left: -10rpx;
			margin-top: -4rpx;
		}
	}
	.memberBox {
		position: relative;
		margin-top: 30rpx;
		.memberImg {
			position: relative;
			z-index: 3;
			margin-left: 7rpx;
		}
		.memberInfo {
			width: 100%;
			position: absolute;
			z-index: 10;
			margin-top: -150rpx;
			.changeRedee {
				width:47%; 
				background: linear-gradient(82.81deg, #F0F7FF 28.89%, rgba(255, 255, 255, 0.25) 98.97%);
				height: 126rpx;
			}
			.RechargeSty {
				width:47%;
				background: linear-gradient(82.81deg, #FFF8F0 28.89%, rgba(255, 255, 255, 0.25) 98.97%);
				height: 126rpx;
			}
		}
		.goldSty {
			background-image: url(/static/menmber/goldBg.png);
			background-size: 100% 100%;
			width:100%;
			height:300rpx;
			position: relative;
			.glodIconSty {
				width: 140rpx;
				height: 140rpx;
				position: absolute;
				right: 24rpx;
				top: -30rpx;
			}
			.dateSty {
				color: #904538;
				font-size: 20rpx;
			}
			.memberTextSty {
				color: #904538;
				font-size: 38rpx;
				font-weight: 600;
			}
		}
		.platinumSty {
			background-image: url(/static/menmber/PlatinumBg.png);
			background-size: 100% 100%;
			width:100%;
			height:300rpx;
			position: relative;
			.glodIconSty {
				width: 140rpx;
				height: 140rpx;
				position: absolute;
				right: 24rpx;
				top: -30rpx;
			}
			.dateSty {
				color: #fff;
				font-size: 20rpx;
			}
			.memberTextSty {
				color: #fff;
				font-size: 38rpx;
				font-weight: 600;
			}
		}
		.diamondSty {
			background-image: url(/static/menmber/diamondBg.png);
			background-size: 100% 100%;
			width:100%;
			height:300rpx;
			position: relative;
			.glodIconSty {
				width: 140rpx;
				height: 140rpx;
				position: absolute;
				right: 24rpx;
				top: -30rpx;
			}
			.dateSty {
				color: #fff;
				font-size: 20rpx;
			}
			.memberTextSty {
				color: #fff;
				font-size: 38rpx;
				font-weight: 600;
			}
		}
	}
	.badgeBox {
		width: 48rpx; 
		height: 22rpx;
		background: linear-gradient(96.98deg, #FC5E37 6.1%, #FF3200 99.27%);
		color: #fff;
		margin-left: 15rpx;
		margin-bottom: -10rpx;
		border-radius: 500rpx 0 0 0;
		right: 40rpx !important;
	}
</style>
